<template>
	<div class="add-update-preview">
		<el-form
			class="add-update-form"
			ref="ruleForm"
			:model="ruleForm"
			:rules="rules"
			label-width="100px"
			>
			<el-form-item class="add-item" label="申报编号" prop="shenbaobianhao">
				<el-input v-model="ruleForm.shenbaobianhao" 
					placeholder="申报编号" clearable :disabled=" false  ||ro.shenbaobianhao"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="设备名称" prop="shebeimingcheng">
				<el-input v-model="ruleForm.shebeimingcheng" 
					placeholder="设备名称" clearable :disabled=" false  ||ro.shebeimingcheng"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="设备类型" prop="shebeileixing">
				<el-input v-model="ruleForm.shebeileixing" 
					placeholder="设备类型" clearable :disabled=" false  ||ro.shebeileixing"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="设备图片" v-if="type!='cross' || (type=='cross' && !ro.shebeitupian)" prop="shebeitupian">
				<file-upload
					tip="点击上传设备图片"
					action="file/upload"
					:limit="3"
					:multiple="true"
					:fileUrls="ruleForm.shebeitupian?ruleForm.shebeitupian:''"
					@change="shebeitupianUploadChange"
					></file-upload>
			</el-form-item>
			<el-form-item class="add-item" v-else label="设备图片" prop="shebeitupian">
				<img v-if="ruleForm.shebeitupian.substring(0,4)=='http'" class="upload-img" v-bind:key="index" :src="ruleForm.shebeitupian.split(',')[0]">
				<img v-else class="upload-img" v-bind:key="index" v-for="(item,index) in ruleForm.shebeitupian.split(',')" :src="baseUrl+item">
			</el-form-item>
			<el-form-item class="add-item" label="生产公司" prop="shengchangongsi">
				<el-input v-model="ruleForm.shengchangongsi" 
					placeholder="生产公司" clearable :disabled=" false  ||ro.shengchangongsi"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="工号" prop="gonghao">
				<el-input v-model="ruleForm.gonghao" 
					placeholder="工号" clearable :disabled=" false  ||ro.gonghao"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="姓名" prop="xingming">
				<el-input v-model="ruleForm.xingming" 
					placeholder="姓名" clearable :disabled=" false  ||ro.xingming"></el-input>
			</el-form-item>
			<el-form-item class="add-item" label="安排时间" prop="anpaishijian">
				<el-date-picker
					:disabled=" false  ||ro.anpaishijian"
					value-format="yyyy-MM-dd HH:mm:ss"
					v-model="ruleForm.anpaishijian" 
					type="datetime"
					placeholder="安排时间">
				</el-date-picker>
			</el-form-item>
			<el-form-item class="add-item" label="技术账号" prop="jishuzhanghao">
				<el-select  @change="jishuzhanghaoChange" v-model="ruleForm.jishuzhanghao" placeholder="请选择技术账号">
					<el-option
						v-for="(item,index) in jishuzhanghaoOptions"
						:key="index"
						:label="item"
						:value="item">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item class="add-item" label="技术姓名" prop="jishuxingming">
				<el-input v-model="ruleForm.jishuxingming" 
					placeholder="技术姓名" clearable :disabled=" false  ||ro.jishuxingming"></el-input>
			</el-form-item>
			<el-form-item class="add-item"  label="报修状态" prop="baoxiuzhuangtai">
				<el-select v-model="ruleForm.baoxiuzhuangtai" placeholder="请选择报修状态" :disabled="true  ||ro.baoxiuzhuangtai" >
					<el-option
						v-for="(item,index) in baoxiuzhuangtaiOptions"
						:key="index"
						:label="item"
						:value="item">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item class="add-item" label="故障描述" prop="guzhangmiaoshu">
				<editor 
					v-model="ruleForm.guzhangmiaoshu" 
					class="editor" 
					myQuillEditor="guzhangmiaoshu"
					action="file/upload">
				</editor>
			</el-form-item>

			<el-form-item class="add-btn-item">
				<el-button class="submitBtn"  type="primary" @click="onSubmit">
					<span class="icon iconfont icon-kaitongfuwu"></span>
					<span class="text">提交</span>
				</el-button>
				<el-button class="closeBtn" @click="back()">
					<span class="icon iconfont icon-shanchu1"></span>
					<span class="text">取消</span>
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				baseUrl: '',
				ro:{
					shenbaobianhao : false,
					shebeimingcheng : false,
					shebeileixing : false,
					shebeitupian : false,
					shengchangongsi : false,
					guzhangmiaoshu : false,
					gonghao : false,
					xingming : false,
					anpaishijian : false,
					jishuzhanghao : false,
					jishuxingming : false,
					baoxiuzhuangtai : false,
					crossuserid : false,
					crossrefid : false,
				},
				type: '',
				userTableName: localStorage.getItem('UserTableName'),
				ruleForm: {
					shenbaobianhao: '',
					shebeimingcheng: '',
					shebeileixing: '',
					shebeitupian: '',
					shengchangongsi: '',
					guzhangmiaoshu: '',
					gonghao: '',
					xingming: '',
					anpaishijian: '',
					jishuzhanghao: '',
					jishuxingming: '',
					baoxiuzhuangtai: '未维修' ,
					crossuserid: '',
					crossrefid: '',
				},
				jishuzhanghaoOptions: [],
				baoxiuzhuangtaiOptions: [],


				rules: {
					shenbaobianhao: [
					],
					shebeimingcheng: [
						{ required: true, message: '设备名称不能为空', trigger: 'blur' },
					],
					shebeileixing: [
					],
					shebeitupian: [
					],
					shengchangongsi: [
					],
					guzhangmiaoshu: [
					],
					gonghao: [
					],
					xingming: [
					],
					anpaishijian: [
					],
					jishuzhanghao: [
					],
					jishuxingming: [
					],
					baoxiuzhuangtai: [
					],
					crossuserid: [
					],
					crossrefid: [
					],
				},
				centerType: false,
			};
		},
		computed: {



		},
		components: {
		},
		created() {
			if(this.$route.query.centerType){
				this.centerType = true
			}
			//this.bg();
			let type = this.$route.query.type ? this.$route.query.type : '';
			this.init(type);
			this.baseUrl = this.$config.baseUrl;
			this.ruleForm.anpaishijian = this.getCurDateTime()
		},
		methods: {
			getMakeZero(s) {
				return s < 10 ? '0' + s : s;
			},
			// 下载
			download(file){
				window.open(`${file}`)
			},
			// 初始化
			init(type) {
				this.type = type;
				if(type=='cross'){
					var obj = JSON.parse(localStorage.getItem('crossObj'));
					for (var o in obj){
						if(o=='shenbaobianhao'){
							this.ruleForm.shenbaobianhao = obj[o];
							this.ro.shenbaobianhao = true;
							continue;
						}
						if(o=='shebeimingcheng'){
							this.ruleForm.shebeimingcheng = obj[o];
							this.ro.shebeimingcheng = true;
							continue;
						}
						if(o=='shebeileixing'){
							this.ruleForm.shebeileixing = obj[o];
							this.ro.shebeileixing = true;
							continue;
						}
						if(o=='shebeitupian'){
							this.ruleForm.shebeitupian = obj[o]?obj[o].split(",")[0]:'';
							this.ro.shebeitupian = true;
							continue;
						}
						if(o=='shengchangongsi'){
							this.ruleForm.shengchangongsi = obj[o];
							this.ro.shengchangongsi = true;
							continue;
						}
						if(o=='guzhangmiaoshu'){
							this.ruleForm.guzhangmiaoshu = obj[o];
							this.ro.guzhangmiaoshu = true;
							continue;
						}
						if(o=='gonghao'){
							this.ruleForm.gonghao = obj[o];
							this.ro.gonghao = true;
							continue;
						}
						if(o=='xingming'){
							this.ruleForm.xingming = obj[o];
							this.ro.xingming = true;
							continue;
						}
						if(o=='anpaishijian'){
							this.ruleForm.anpaishijian = obj[o];
							this.ro.anpaishijian = true;
							continue;
						}
						if(o=='jishuzhanghao'){
							this.ruleForm.jishuzhanghao = obj[o];
							this.ro.jishuzhanghao = true;
							continue;
						}
						if(o=='jishuxingming'){
							this.ruleForm.jishuxingming = obj[o];
							this.ro.jishuxingming = true;
							continue;
						}
						if(o=='baoxiuzhuangtai'){
							this.ruleForm.baoxiuzhuangtai = obj[o];
							this.ro.baoxiuzhuangtai = true;
							continue;
						}
						if(o=='crossuserid'){
							this.ruleForm.crossuserid = obj[o];
							this.ro.crossuserid = true;
							continue;
						}
						if(o=='crossrefid'){
							this.ruleForm.crossrefid = obj[o];
							this.ro.crossrefid = true;
							continue;
						}
					}
				}else if(type=='edit'){
					this.info()
				}
				// 获取用户信息
				this.$http.get(this.userTableName + '/session', {emulateJSON: true}).then(res => {
					if (res.data.code == 0) {
						var json = res.data.data;
					}
				});
				this.$http.get('option/jishurenyuan/jishuzhanghao', {emulateJSON: true}).then(res => {
					if (res.data.code == 0) {
						this.jishuzhanghaoOptions = res.data.data;
					}
				});
				this.baoxiuzhuangtaiOptions = "已维修,未维修".split(',')

				if (localStorage.getItem('raffleType') && localStorage.getItem('raffleType') != null) {
					localStorage.removeItem('raffleType')
					setTimeout(() => {
						this.onSubmit()
					}, 300)
				}
			},
			// 下二随
			jishuzhanghaoChange () {
				this.$http.get('follow/jishurenyuan/jishuzhanghao?columnValue=' + this.ruleForm.jishuzhanghao, {emulateJSON: true}).then(res => {
					if (res.data.code == 0) {
						if(res.data.data.jishuxingming){
							this.ruleForm.jishuxingming = res.data.data.jishuxingming
						}
					}
				});
			},

			// 多级联动参数
			// 多级联动参数
			info() {
				this.$http.get(`weixiurenwu/detail/${this.$route.query.id}`, {emulateJSON: true}).then(res => {
					if (res.data.code == 0) {
						this.ruleForm = res.data.data;
					}
				});
			},
			// 提交
			async onSubmit() {
				//更新跨表属性
				var crossuserid;
				var crossrefid;
				var crossoptnum;
				var finishNum = 0;
				if(!this.ruleForm.id) {
					delete this.ruleForm.userid
				}
				await this.$refs["ruleForm"].validate(async valid => {
					if(valid) {
						if(this.type=='cross'){
							var statusColumnName = localStorage.getItem('statusColumnName');
							var statusColumnValue = localStorage.getItem('statusColumnValue');
							if(statusColumnName && statusColumnName!='') {
								var obj = JSON.parse(localStorage.getItem('crossObj'));
								if(!statusColumnName.startsWith("[")) {
									for (var o in obj){
										if(o==statusColumnName){
											obj[o] = statusColumnValue;
										}
									}
									var table = localStorage.getItem('crossTable');
									await this.$http.post(table+'/update', obj).then(res => {});
								}
								else {
									crossuserid=Number(localStorage.getItem('frontUserid'));
									crossrefid=obj['id'];
									crossoptnum=localStorage.getItem('statusColumnName');
									crossoptnum=crossoptnum.replace(/\[/,"").replace(/\]/,"");
								}
							}
							if(crossrefid && crossuserid) {
								this.ruleForm.crossuserid=crossuserid;
								this.ruleForm.crossrefid=crossrefid;
								var params = {
									page: 1,
									limit: 10,
									crossuserid:crossuserid,
									crossrefid:crossrefid,
								}
								await this.$http.get('weixiurenwu/list', {
									params: params
								}).then(res => {
									finishNum = res.data.data.total
								});
							}
							if(finishNum>=crossoptnum) {
								this.$message({
									message: localStorage.getItem('tips'),
									type: 'error',
									duration: 1500,
								});
								return false;
							}
						}


						await this.$http.post(`weixiurenwu/${this.ruleForm.id?'update':this.centerType?'save':'add'}`, this.ruleForm).then(async res => {
							if (res.data.code == 0) {
								this.$message({
									message: '操作成功',
									type: 'success',
									duration: 1500,
									onClose: () => {
										this.$router.go(-1);
										
									}
								});
							} else {
								this.$message({
									message: res.data.msg,
									type: 'error',
									duration: 1500
								});
							}
						});
					}
				});
			},
			// 获取uuid
			getUUID () {
				return new Date().getTime();
			},
			// 返回
			back() {
				this.$router.go(-1);
			},
			shebeitupianUploadChange(fileUrls) {
				this.ruleForm.shebeitupian = fileUrls.replace(new RegExp(this.$config.baseUrl,"g"),"");
			},
		}
	};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.add-update-preview {
		padding: 20px 16%;
		margin: 10px auto;
		background: #fff;
		width: 100%;
		position: relative;
		.add-update-form {
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25),0px -4px 4px 0px rgba(0, 0, 0, 0.25);
			padding: 15px 10px;
			width: 100%;
			position: relative;
			.add-item.el-form-item {
				padding: 10px;
				margin: 0 0 10px;
				background: none;
				/deep/ .el-form-item__label {
					padding: 0 10px 0 0;
					color: #6c84ed;
					font-weight: 500;
					width: 100px;
					font-size: 14px;
					line-height: 40px;
					text-align: right;
				}
				/deep/ .el-form-item__content {
					margin-left: 100px;
				}
				.el-input {
					width: 70%;
				}
				.el-input /deep/ .el-input__inner {
					border: 1px solid #E8E8E8;
					border-radius: 10px;
					padding: 0 12px;
					box-shadow: 0 0 0px rgba(64, 158, 255, .5);
					outline: none;
					color: #000;
					width: 100%;
					font-size: 14px;
					height: 40px;
				}
				.el-input /deep/ .el-input__inner[readonly="readonly"] {
					border: 1px solid #E8E8E8;
					cursor: not-allowed;
					border-radius: 10px;
					padding: 0 12px;
					box-shadow: 0 0 0px rgba(85, 85, 127, 0.5);
					outline: none;
					color: #000;
					background: #eee;
					width: 100%;
					font-size: 14px;
					height: 40px;
				}
				.el-input-number /deep/ .el-input__inner {
					text-align: left;
					border: 1px solid #E8E8E8;
					border-radius: 10px;
					padding: 0 12px;
					box-shadow: 0 0 0px rgba(64, 158, 255, .5);
					outline: none;
					color: #000;
					width: 100%;
					font-size: 14px;
					height: 40px;
				}
				.el-input-number /deep/ .is-disabled .el-input__inner {
					text-align: left;
					border: 1px solid #E8E8E8;
					cursor: not-allowed;
					border-radius: 10px;
					padding: 0 12px;
					box-shadow: 0 0 0px rgba(85, 85, 127, 0.5);
					outline: none;
					color: #000;
					background: #eee;
					width: 100%;
					font-size: 14px;
					height: 40px;
				}
				.el-input-number /deep/ .el-input-number__decrease {
					display: none;
				}
				.el-input-number /deep/ .el-input-number__increase {
					display: none;
				}
				.el-select {
					width: 70%;
				}
				.el-select /deep/ .el-input__inner {
					border: 1px solid #E8E8E8;
					border-radius: 10px;
					padding: 0 10px;
					box-shadow: 0 0 0px rgba(64, 158, 255, .5);
					outline: none;
					color: #000;
					width: 100%;
					font-size: 14px;
					height: 40px;
				}
				.el-select /deep/ .is-disabled .el-input__inner {
					border: 1px solid #E8E8E8;
					cursor: not-allowed;
					border-radius: 10px;
					padding: 0 10px;
					box-shadow: 0 0 0px rgba(85, 85, 127, 0.5);
					outline: none;
					color: #000;
					background: #eee;
					width: 100%;
					font-size: 14px;
					height: 40px;
				}
				.el-date-editor {
					width: 70%;
				}
				.el-date-editor /deep/ .el-input__inner {
					border: 1px solid #E8E8E8;
					border-radius: 10px;
					padding: 0 10px 0 30px;
					box-shadow: 0 0 0px rgba(64, 158, 255, .5);
					outline: none;
					color: #000;
					width: 100%;
					font-size: 14px;
					height: 40px;
				}
				.el-date-editor /deep/ .el-input__inner[readonly="readonly"] {
					border: 1px solid #E8E8E8;
					cursor: not-allowed;
					border-radius: 10px;
					padding: 0 10px 0 30px;
					box-shadow: 0 0 0px rgba(85, 85, 127, 0.5);
					outline: none;
					color: #000;
					background: #eee;
					width: 100%;
					font-size: 14px;
					height: 40px;
				}
				/deep/ .el-upload--picture-card {
					background: transparent;
					border: 0;
					border-radius: 0;
					width: auto;
					height: auto;
					line-height: initial;
					vertical-align: middle;
				}
				/deep/ .upload .upload-img {
					border: 1px dashed #a4b3f6;
					cursor: pointer;
					border-radius: 6px;
					color: #a4b3f6;
					width: 100px;
					font-size: 32px;
					line-height: 100px;
					text-align: center;
					height: 100px;
				}
				/deep/ .el-upload-list .el-upload-list__item {
					border: 1px dashed #a4b3f6;
					cursor: pointer;
					border-radius: 6px;
					color: #a4b3f6;
					width: 100px;
					font-size: 32px;
					line-height: 100px;
					text-align: center;
					height: 100px;
					font-size: 14px;
					line-height: 1.8;
				}
				/deep/ .el-upload .el-icon-plus {
					border: 1px dashed #a4b3f6;
					cursor: pointer;
					border-radius: 6px;
					color: #a4b3f6;
					width: 100px;
					font-size: 32px;
					line-height: 100px;
					text-align: center;
					height: 100px;
				}
				/deep/ .el-upload__tip {
					color: #a4b3f6;
				}
				.el-textarea /deep/ .el-textarea__inner {
					border: 1px solid #E8E8E8;
					border-radius: 10px;
					padding: 12px;
					box-shadow: 0 0 0px rgba(64, 158, 255, .5);
					outline: none;
					color: #000;
					width: 70%;
					font-size: 14px;
					height: 120px;
				}
				.el-textarea /deep/ .el-textarea__inner[readonly="readonly"] {
					border: 1px solid #E8E8E8;
					cursor: not-allowed;
					border-radius: 10px;
					padding: 12px;
					box-shadow: 0 0 0px rgba(85, 85, 127, 0.5);
					outline: none;
					color: #000;
					background: #eee;
					width: 70%;
					font-size: 14px;
					height: 120px;
				}
				/deep/ .el-input__inner::placeholder {
					color: #a1a0a0;
					font-size: 14px;
				}
				/deep/ textarea::placeholder {
					color: #a1a0a0;
					font-size: 14px;
				}
				.editor {
					background-color: #fff;
					border-radius: 0;
					padding: 0;
					box-shadow: 0 0 0px rgba(75,223,201,.5);
					margin: 0;
					width: 100%;
					border-color: #ccc;
					border-width: 0;
					border-style: solid;
					height: auto;
				}
				.upload-img {
					width: 100px;
					height: 100px;
				}
				.viewBtn {
					border: 0;
					cursor: pointer;
					padding: 0 10px;
					margin: 0;
					color: #fff;
					display: inline-block;
					font-size: 14px;
					line-height: 30px;
					border-radius: 0;
					outline: none;
					background: #a4b3f6;
					width: auto;
					height: 30px;
				}
				.viewBtn:hover {
					opacity: 0.7;
				}
				.unviewBtn {
					border: 0;
					cursor: not-allowed;
					padding: 0 10px;
					margin: 0;
					color: #fff;
					display: inline-block;
					font-size: 14px;
					line-height: 30px;
					border-radius: 0;
					outline: none;
					background: #6c84ed;
					width: auto;
					height: 30px;
				}
				.unviewBtn:hover {
					color: #fff;
					background: #6c84ed;
				}
			}
			.add-btn-item {
				padding: 0;
				margin: 0;
				.submitBtn {
					border: 0;
					cursor: pointer;
					border-radius: 0;
					padding: 0 35px;
					margin: 0 20px 0 0;
					outline: none;
					background: #a4b3f6;
					display: inline-block;
					width: auto;
					font-size: 14px;
					line-height: 40px;
					height: 40px;
					.icon {
						color: rgba(255, 255, 255, 1);
						display: none;
					}
					.text {
						color: rgba(255, 255, 255, 1);
					}
				}
				.submitBtn:hover {
					opacity: 0.7;
					.icon {
						color: #fff;
					}
					.text {
						color: #fff;
					}
				}
				.closeBtn {
					border: 0px solid rgba(64, 158, 255, 1);
					cursor: pointer;
					border-radius: 0;
					padding: 0 35px;
					margin: 0 20px 0 0;
					outline: none;
					background: #E8E8E8;
					display: inline-block;
					width: auto;
					font-size: 14px;
					line-height: 40px;
					height: 40px;
					.icon {
						color: #6E6E6E;
						display: none;
					}
					.text {
						color: #6E6E6E;
					}
				}
				.closeBtn:hover {
					opacity: 0.7;
					.icon {
						color: #6E6E6E;
					}
					.text {
						color: #6E6E6E;
					}
				}
			}
		}
	}
	.el-date-editor.el-input {
		width: auto;
	}
</style>
